<template>
  <view :class="$style.dispatch_container" class="flex flex-col absolute bottom-0">
    <view :class="$style.title">派发至去现场处置的人</view>
    <view class="add_contact flex items-center">
      <van-search :class="$style.search" v-model="searchValue" placeholder="搜索联系人" shape="round" @search="search" />
      <button :class="$style.pull_button" @click="handlePullContactList">获取手机通讯录</button>
    </view>

    <scroll-view :class="$style.contact_list" scroll-y="true" class="scroll-Y">
      <van-checkbox-group v-model="checkedList">
        <van-cell-group inset>
          <van-cell v-for="contactItem in contactList" :key="contactItem.id"
            :title="contactItem.name + ' ' + contactItem.phone" clickable @click="toggleContactClick(contactItem)">
            <template #right-icon>
              <van-checkbox @click.stop :value="contactItem.checked" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </scroll-view>

    <view :class="$style.operation" class="flex">
      <button :class="$style.button" @click="handleDispatchOperation('cancel')">取消</button>
      <button :class="$style.dispatch" style="margin: 0 30rpx" @click="handleDispatchOperation('confirm')">确定</button>
    </view>
  </view>
</template>

<script setup lang='ts'>
import { ref } from "vue";
import { onBeforeUpdate } from "@vue/runtime-core";
import { insertDispatchStaff } from '@/api'
import { getLocal } from "@/utils";
import { onLoad } from "@dcloudio/uni-app";
import { useInstantMessage } from "@/store";

let searchValue = ref<string>("");
const checkedList = ref<any>([]);
let openid = getLocal('openid')
let lqryInfo: any = getLocal('lqryInfo')
let contactList = ref<Array<any>>([
  { id: 0, name: '张三', phone: '13231242525', checked: false },
  { id: 1, name: '张三4', phone: '13231242525', checked: false },
  { id: 2, name: '张三而', phone: '13231242525', checked: false },
]);
// 短信携带的参数信息
let jqId = ref<string>('')
let lxMc = ref<string>('')
onLoad((options: any) => {
  jqId.value = options.jqId
  lxMc.value = options.lxMc
})


/** 存储 群聊id */
const chatStore = useInstantMessage()

onBeforeUpdate(() => {
  checkedList.value = [];
});

/**
 * 搜索当前联系人
 */
function search() {

}

/** 处理每行联系人的点击事件 */
function toggleContactClick(item: any) {
  item.checked = !item.checked
}

/**
 * 确认调派信息
 */
function dispatchStaff() {
  let dispatchContactList: any = handleContactList()
  let params: any = {
    dppc: 1,
    jqid: jqId.value,
    lxMc: lxMc.value,
    sfSjr: 1,
    sjLxrList: dispatchContactList,
    sjrZhid: openid,
    yjlddwBm: lqryInfo.yjlddwTywysbm,
    zgjgbh: lqryInfo.xfjyjgTywysbm,
    zhid: openid,
    zhzt: lqryInfo.yjlddwlxdm
  }
  insertDispatchStaff(params).then((res: any) => {
    if (res.result.resultCode === "000000") {
      console.log('调派成功', res)
      chatStore.setChatGroup(res?.data)
    }

  }).catch((e: any) => {
    console.log('调派失败', e);
  })
}

/**
 * 处理是否调派人员操作
 * @param opt {string} confirm cancel 
 */
function handleDispatchOperation(opt: string) {
  console.log('确认调派人员操作', opt);
  if (opt === 'confirm') {
    dispatchStaff()
  } else {
    contactList.value.forEach((item: any) => {
      item.checked = false
    })
  }
}

function handleContactList() {
  let confirmContactList: any = []
  contactList.value.forEach((item: any) => {
    if (item.checked) {
      let contactObj = {
        sjh: item.phone,
        lxrXm: item.name
      }
      confirmContactList.push(contactObj)
    }
  });

  return confirmContactList
}

/**
 * 拉取手机通讯录
 */
function handlePullContactList() {
  wx.chooseContact({
    success: (res: any) => {
      console.log('成功拉起手机联系人', res);
      contactList.value.push({
        id: res.phoneNumber,
        name: res.displayName,
        phone: res.phoneNumber,
        checked: false
      })
    },
    fail: (err: any) => {
      console.log('未拉起手机联系人', err);
    },
  })
}
</script>

<style lang='less' module>
.dispatch_container {
  width: 100%;
  height: 100vh;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 19rpx 1rpx rgba(51, 51, 51, 0.2);
  // border-radius: 40rpx;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  padding: 20rpx 10rpx 20rpx 20rpx;
  box-sizing: border-box;
  z-index: 11;

  .contact_list {
    height: calc(100vh - 300rpx);
  }

  .button {
    width: 40%;
    height: 80rpx;
    background: rgba(86, 120, 244, 0.1);
    border-radius: 40rpx;
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5678f4;
    margin-left: 30rpx;

    &::after {
      border: 0;
    }
  }

  .pull_button {
    height: 70rpx;
    background: rgba(86, 120, 244, 0.1);
    border-radius: 40rpx;
    font-size: 25rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5678f4;
    margin-left: 10rpx;
    line-height: 70rpx;

    &::after {
      border: 0;
    }
  }

  .dispatch {
    background-image: linear-gradient(to right, #4520ca, #c90842);
    height: 80rpx;
    width: 40%;
    color: #ffffff;
    border-radius: 40rpx;
    font-size: 30rpx;
  }
}
</style>

<style lang="less" scoped>
.dispatch_container {
  /deep/ .van-checkbox__label {
    font-size: 24rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999 !important;
  }
}
</style>
